<template>
   <div class="pages">
    <!-- <div>
       <van-checkbox :value="checkedAll" checked-color="#07c160" @change="changeAll">
       </van-checkbox>
     </div> -->
     <ul class="box">
       <li v-for="(item,index) in dataList" :key="index" @click="checkFun(item,index)" :class="{active:item.isCheck}">
         <img :src="item.imgUrl" alt="">
<!--         <div class="boxCheckbox">-->
<!--           <van-checkbox :value="item.isCheck " checked-color="#07c160" @change="onChange($event,item,index)"></van-checkbox>-->
<!--         </div>-->

       </li>
     </ul>
     <div class="weui-form__opr-area">
       <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips" @click="submitFun">添加到上传列表</a>
     </div>
   </div>


</template>

<script>
  export default {
    name: 'addImg',
    data () {
      return {
        show: false,
        checkedAll: false,
        dataList: [],
        checkData:[]
      }
    },
    onShow () {
      this.getList()
    },
    methods: {
      checkFun (item,index) {

        item.isCheck=!item.isCheck;
        this.checkData.push(item)
        this.$set(this.dataList,this.dataList[index],item)
        this.$forceUpdate();
      },
      changeAll (e) {
        this.checkedAll = e.mp.detail
      },
      getList () {
        let cartId = wx.getStorageSync('cartId')
        this.$http.request({
          methods: 'get',
          url: `/api/card/detail/${cartId}`,
          body: {}
        }).then((data) => {
          if (data.code == 200) {
            this.dataList = data.data.materialList
            this.dataList.forEach((a, i) => {
              a.isCheck = false
            })
          }
        })
      },
     submitFun(){
        wx.setStorageSync('addImg', JSON.stringify(this.checkData))
        wx.navigateBack({

        })
     }
    },

  }
</script>

<style scoped>
  .box{
    width: 100%;
    box-sizing: border-box;
    padding:20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #fff;
  }
  .box>li{
    width: 45%;
    box-sizing: border-box;
    padding:10rpx;
    border:1px solid #cccccc;
    margin-bottom: 30rpx;
  }
  .box>li.active{
    border-color: #07c160;
  }
  .box>li>img{
    width: 100%;

  }
  .box .boxCheckbox{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
